<div id="new-event-keeper" style="font-size: 62.5%; display: none;"
	title="Nowa rezerwacja">
	<form id="new-event-form" method="post"
		action="<?php echo Yii::app()->request->baseUrl; ?>/index.php/calendar/addReservation">
		<label for="station" style='color: blue;'><b>Stanowisko: </b> </label>
		<select id="new-event-station" name="station"></select> <span
			style='display: block; margin-top: 10px; color: blue;'><b>Termin
				rezerwacji:</b> </span> <label>Czas: </label> <input id="starttime"
			class="starttime" name="starttime" size="4" style='display: inline;'>
		<label for="station"> - </label> <input id="endtime" class="endtime"
			name="endtime" size="4" style='display: inline;'> <label
			style='margin-left: 20px;'>Data: </label> <input id="reservationdate"
			class="reservationdate" name="reservationdate" size="9"
			style='display: inline;'> 
			<span
			style='display: block; margin-top: 10px; color: blue;'><b>Powtarzaj:</b> </span> 								
				<select id="eventRepeat" name="eventRepeat">
					<option value="None">Bez powtórzeń</option>
					<option value="Daily">Codziennie</option>
					<option value="Weekly">Co tydzień</option>
					<option value="Monthly">Co miesiąc</option>
					<option value="Yearly">Co roku</option>
				</select>
				<div id="interval_day_div" style="margin-top: 10px; display: none;">
					<input type="checkbox" name="days[]" id="day_1" value="1" >
					<label class="checkboxlabelclose" for="day_1">Pon</label>
					<input type="checkbox" name="days[]" id="day_2" value="2" >
					<label class="checkboxlabelclose" for="day_2">Wt</label>
					<input type="checkbox" name="days[]" id="day_3" value="3" >
					<label class="checkboxlabelclose" for="day_3">Śr</label>
					<input type="checkbox" name="days[]" id="day_4" value="4" >
					<label class="checkboxlabelclose" for="day_4">Cz</label>
					<input type="checkbox" name="days[]" id="day_5" value="5" >
					<label class="checkboxlabelclose" for="day_5">Pi</label>
					<input type="checkbox" name="days[]" id="day_6" value="6" >
					<label class="checkboxlabelclose" for="day_6">So</label>
					<input type="checkbox" name="days[]" id="day_0" value="0" >
					<label class="checkboxlabelclose" for="day_0">Nd</label>
				</div>
				<div id="interval_month_div" style="margin-top: 10px; display: none;">
					<input class="radiomonth" type="radio" name="monthday" value="dom" id="month_1" style="display: inline;">
					<label class="radiolabel" for="month_1">W dzień miesiąca</label>
					<input class="radiomonth" type="radio" name="monthday" value="dow" id="month_2" style="display: inline;">
					<label class="radiolabel" for="month_2">W dzień tygodnia</label>
				</div>
				<div id="repeatEnd" style="margin-top;display: none; margin-top: 5px;">
					<label>do: </label> <input id="repeatEndDate"
					class="repeatEndDate" name="repeatEndDate" size="9" style='display: inline;'>
				</div>
			<span
			style='display: block; margin-top: 10px; color: blue;'><b>Wybierz
				narzędzia:</b> </span>
		<div id="new-event-avail-tools"></div>
	</form>
</div>

<script>
$(function() {
	$( "#new-event-keeper" ).dialog({
		autoOpen: false,
		height: 'auto',
		width: 350,
		modal: true,
		resizable: false,
		buttons : {
			"Ok" : function() {
				$.post(
					'<?php echo Yii::app()->request->baseUrl; ?>/index.php/calendar/addKeeperReservation',
					$("#new-event-form").serialize(),
					function(data) {
						$('#calendar').fullCalendar( 'refetchEvents' );
					},
					"json"
				);			
				$( this ).dialog( "close" );
			},	
			"Anuluj": function() {
				$( this ).dialog( "close" );
			}
		},
		open: function() {
			
		},
		resize : function() {
		    $(this).css('max-height', '1000px');
		  }
	});
	var reservationDate=$('#new-event-form .reservationdate').datepicker({ 
		dateFormat: 'dd/mm/yy',
		minDate:new Date(),
		onClose: function (ev){
	    	   $.post(
						'<?php echo Yii::app()->request->baseUrl;?>/index.php/calendar/availableStationsAndTools',
						{
							day : getDayNew(),
							month : getMonthNew(),
							year : getYearNew(),
							hourStart : getHourStartNew(),
							hourStop : getHourStopNew(),
							minStart : getMinuteStartNew(),
							minStop : getMinuteStopNew()
						},
						function(data) {
							var stations = data.stations;
							var tools = data.tools;
							showServerResponseNew(stations, tools);
						},
						"json"
					);
	       },
	});
	var startTime=$('#new-event-form .starttime').timepicker({ 
		timeFormat: 'HH:mm',
		onSelect: function (dateText, inst) {
			var temp = $('#new-event-form .starttime').datepicker('getDate');
       		$('#new-event-form .starttime').datepicker('setDate', temp);
       		temp.setHours(temp.getHours());
            temp.setMinutes(temp.getMinutes()+30);
            $('#new-event-form .endtime').datepicker('setDate', temp).datepicker("option", 'minDate', temp).datepicker("option", 'maxDate', temp);
       },
       onClose: function (ev){
    	   $.post(
					'<?php echo Yii::app()->request->baseUrl;?>/index.php/calendar/availableStationsAndTools',
					{
						day : getDayNew(),
						month : getMonthNew(),
						year : getYearNew(),
						hourStart : getHourStartNew(),
						hourStop : getHourStopNew(),
						minStart : getMinuteStartNew(),
						minStop : getMinuteStopNew()
					},
					function(data) {
						var stations = data.stations;
						var tools = data.tools;
						showServerResponseNew(stations, tools)
					},
					"json"
				);
       },
       hourMin: 6,
       hourMax: 21,
       hourGrid: 2,
       minuteGrid: 10
	});
	var endTime=$('#new-event-form .endtime').timepicker({ 
		timeFormat: 'HH:mm',
		onSelect: function (dateText, inst) {
            var temp = $('#new-event-form .endtime').datepicker('getDate');
       		var temp2 = $('#new-event-form .starttime').datepicker('getDate');
       		if(temp.getHours()<temp2.getHours()){
				temp.setHours(temp2.getHours());
				temp.setMinutes(temp2.getMinutes()+30);
           	}
       		else if(temp.getHours()==temp2.getHours()&&temp.getMinutes()<=temp2.getMinutes()){
				temp.setHours(temp2.getHours());
				var difference = temp2.getMinutes() - temp.getMinutes();
				if(difference > 0)
					temp.setMinutes(temp2.getMinutes()+difference+30);
				else
					temp.setMinutes(temp2.getMinutes()+30);
					
       		}
       		$('#new-event-form .endtime').datepicker('setDate', temp);
       },
       onClose: function (ev){
    	   $.post(
					'<?php echo Yii::app()->request->baseUrl;?>/index.php/calendar/availableStationsAndTools',
					{
						day : getDayNew(),
						month : getMonthNew(),
						year : getYearNew(),
						hourStart : getHourStartNew(),
						hourStop : getHourStopNew(),
						minStart : getMinuteStartNew(),
						minStop : getMinuteStopNew()
					},
					function(data) {
						var stations = data.stations;
						var tools = data.tools;
						showServerResponseNew(stations, tools);
					},
					"json"
				);
       },
       hourMin: 6,
       hourMax: 21,
       hourGrid: 2,
       minuteGrid: 10
       });
	$('#new-event-form #eventRepeat').change( function() { 
		   $optionSelected = $('#new-event-form #eventRepeat').find(":selected").val();
		   $minDate = $('#new-event-form .reservationdate').datepicker('getDate');
		   if($optionSelected === 'Weekly')
		   {
			   $( "#new-event-keeper" ).css('max-height', '1000px');
			    var dayOfWeek = $minDate.getUTCDay();
			    $('#new-event-form #day_'+(dayOfWeek+1)%7).prop("checked", true);
		   		$('#new-event-form #interval_day_div').css('display','');
		   		$('#new-event-form #interval_month_div').css('display','none');
		   		$minDate.setDate($minDate.getDate()+7);
		   }
		   else if($optionSelected === 'Monthly')
		   {
			   $('#new-event-form #month_1').prop("checked", true);
			   $('#new-event-form #interval_day_div').css('display','none');
			   $('#new-event-form #interval_month_div').css('display','');
			   $minDate.setMonth($minDate.getMonth()+1);
		   }
		   else
		   {
			   if($optionSelected === 'Daily')
				   $minDate.setDate($minDate.getDate()+1);
			   else if($optionSelected === 'Yearly')
				   $minDate.setFullYear($minDate.getFullYear()+1);
			   $('#new-event-form #interval_day_div').css('display','none');
			   $('#new-event-form #interval_month_div').css('display','none');
		   }
		   $( "#new-event-form #repeatEndDate" ).datepicker( "option", "minDate", $minDate );
	   	   $('#new-event-form #repeatEndDate').datepicker( 'setDate', $minDate );	
		   if($optionSelected === 'None')
			   $('#new-event-form #repeatEnd').css('display', 'none');
		   else
		   {			   
			   $('#new-event-form #repeatEnd').css('display', '');
		   }
	   });
	   $('#new-event-form #repeatEndDate').datepicker({
		   onSelect: function(){
		   		
		   },
		   dateFormat: 'dd/mm/yy',
		   minDate:new Date(),
	   });
});

function showServerResponseNew(stations, tools)
{
	$("#new-event-station").empty();
	for ( var i = 0; i < stations.length; i++ ) {
		$("#new-event-station").append(
			'<option value="'+stations[i].id+'">'+stations[i].name+'</option>');
	}
	$("#new-event-avail-tools").empty();
	for ( var i = 0; i< tools.length; i++ ) {
		$("#new-event-avail-tools").append(
			"<input type='checkbox' name='tools[]' id='tool_" + tools[i].id + "' value='" + tools[i].id + "'>"+
			"<label class='checkboxlabel' for='tool_" + tools[i].id + "'>"+tools[i].name+"</label>");
	}
}

function getDayNew()
{
	return $('#new-event-form .reservationdate').datepicker( "getDate" ).getDate();
}

function getMonthNew()
{
	return $('#new-event-form .reservationdate').datepicker( "getDate" ).getMonth()+1;
}

function getYearNew()
{
	return $('#new-event-form .reservationdate').datepicker( "getDate" ).getFullYear();
}

function getHourStartNew()
{
	return $('#new-event-form .starttime').datepicker( "getDate" ).getHours();
}

function getMinuteStartNew()
{
	return $('#new-event-form .starttime').datepicker( "getDate" ).getMinutes();
}

function getHourStopNew()
{
	return $('#new-event-form .endtime').datepicker( "getDate" ).getHours();
}

function getMinuteStopNew()
{
	return $('#new-event-form .endtime').datepicker( "getDate" ).getMinutes();
}

function resetRepeatingProperties()
{
	$('#new-event-form #interval_day_div').css('display','none');
	$('#new-event-form #interval_month_div').css('display','none');
	$( "#new-event-form #repeatEnd").css('display','none');
	for(var i = 0; i < 7; i++)
    	$('#new-event-form #day_'+i).prop("checked", false);
	$( "#new-event-form #eventRepeat").val('None');
}
</script>
